<template>
  <div class="songlist" >
    <div class="bgtop">
      <img :src="this.songlist.picUrl" alt="" />
      <router-link to="/song"><span class="iconfont icon-zuobian1"></span></router-link>
      <div class="introduce">
        <div class="name">{{ this.songlist.name }}</div>
      </div>
    </div>
    <BorderTitle>歌手简介</BorderTitle>
    <div class="intr" ref="nameif">
      {{ this.songlist.briefDesc }}
    </div>
    <div class="full" @click="clamp()">
      完整歌手介绍
      <i class="arrow"></i>
    </div>

    <BorderTitle>热门歌曲</BorderTitle>
    <template>
      <ul v-for="(i, index) in hotlist" :key="i.id" class="hotsong">
          <SongItem :item="i" @add-list="addMusicList(hotlist)">
            {{index + 1}}
          </SongItem>
      </ul>
    </template>

    <BorderTitle>热门MV</BorderTitle>
    <ul class="hotmve">
      <li  v-for="i in mvslist" :key="i.id" >
         <Songmv :item="i" ></Songmv>
      </li>
       
    </ul>
  </div>
</template>
<script>
import Songmv from "@/components/Songmv";
import SongItem from "@/components/SongItem";
import BorderTitle from "@/components/BorderTitle";
export default {
  components: {
    BorderTitle,
    SongItem,
    Songmv,
  },
  data() {
    return {
      songlist: [],
      listID: null,
      isPlay: false,
      hotlist: [],
      mvslist: null,
    };
  },

  created() {
    this.listID = this.$route.params.id;
    this.$http
      .get("http://localhost:3000/artists?id=" + this.listID)
      .then((data) => {
        this.songlist = data.data.artist;
        this.hotlist = data.data.hotSongs.slice(0, 10);
      });

    this.$http.get("/artist/mv?id=" + this.listID).then((data) => {
      this.mvslist = data.data.mvs.slice(0, 6);
    });

  },
  methods: {
    clamp() {
      if (this.isPlay) {
        this.$refs.nameif.style.height = "680px";
        this.isPlay = false;
      } else if (this.isPlay == false) {
        this.$refs.nameif.style.height = "100px";
        this.isPlay = true;
      }
    },
    addMusicList(newSong) {
      //把当前最新的歌曲列表全部加入我的播放清单
      // this.$root.musicStore.musicList=this.$root.musicStore.musicList.concat(newSong);
      let newArr = this.$root.musicStore.musicList; //取出当前的播放列表
      newSong.map((d) => {
        //处理每一条newSong的音乐
        let find = false;
        for (let n of newArr) {
          if (n.id == d.id) {
            //找到了当前音乐在歌单内存在就不加入歌单
            find = true;
            break;
          }
        }
        if (!find) newArr.push(d); //如果当前音乐在newArr里面未找到则加入newArr
      });
      this.$root.musicStore.musicList = newArr;
    },
  },
};
</script>
<style lang="less"  scoped>
.songlist {
  .bgtop {
    position: relative;
    height: 100%;
    background-color: #ffffff;
    img {
        width: 100%;
        height: 100%;
      }
     span {
      position: absolute;
      top: 14px;
      left: 10px;
      z-index: 8;
      text-decoration:none;
      color: #fff;
    }
    .introduce {
      position: absolute;
      bottom: 60px;
      left: 10px;
      .name {
        color: #ccc;
        font-size: 18px;
        font-weight: 700;
      }
    }
  }
  .intr {
    height: 100px;
    color: #666;
    background: #fff;
    padding: 0 16px 18px;
    overflow: hidden;
    /*文本溢出, 使用省略号 */
    text-overflow: ellipsis;
    /* 以webkit盒子展示, 比较适用于webkit内核和移动端*/
    display: -webkit-box;
    /*限制块容器显示的文本行数, 按照你的需求设置*/
    -webkit-line-clamp: 3;
    /*盒子的方向, 垂直、水平等*/
    -webkit-box-orient: vertical;
    /*文字换行, 可以在单词内断*/
    word-wrap: break-word;
  }
  .full {
    font-size: 14px;
    color: #666;
    text-align: center;
    margin-top: 25px;
    .arrow {
      display: inline-block;
      position: relative;
      width: 9px;
      height: 9px;
      background: url();
      background-size: contain;
      background-repeat: no-repeat;
      left: 4px;
      top: 0;
    }
  }
  .hotmve {
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
    height:200px;
    li {
      width: 33%;
      list-style: none;
      
      
    }
  }
  .hotsong {
    margin-left: -20px;
    margin-right: 5px;
    height: 50px;
  }
}
</style>